<template>
  <div class="app-container">
    <el-space direction="vertical">
      <el-card v-for="(item, index) in list" class="box-card" style="width: 800px;">
        <template #header>
          <div class="card-header">
            {{ item.sequence }}、{{ item.content }}（{{item.desc}}）
            <p><el-tag type="warning">答案：{{ item.refer }}</el-tag></p>
          </div>
        </template>
        <div v-for="(v, i) in item.options" style="margin: 10px;">
          <span>{{ v.label }}、{{ v.content }}</span>
        </div>
        <div style="margin-top: 10px;">
          <el-alert class="my-alert" v-if="2===item.status" :title="'回答错误：'+item.remark" type="error" :show-icon="true"></el-alert>
          <el-alert class="my-alert" v-else-if="1===item.status" :title="'回答正确：'+item.remark" type="success" :show-icon="true"></el-alert>
          <el-alert class="my-alert" v-else title="未回答" type="info" :show-icon="true"></el-alert>
        </div>
      </el-card>
    </el-space>
  </div>
</template>


<script setup>
import { ref,getCurrentInstance,defineExpose,defineProps } from 'vue'
import {get} from "@/utils/request";


const { proxy } = getCurrentInstance();
const list = ref([])

const props = defineProps({
  id: 0
});
const initPage = (id) =>{
  get('/userQuestion/detail',{answerId:id}).then(res=>{
    if(res){
      list.value = res
    }
  })
}
initPage(props.id)
defineExpose({initPage})
</script>
<style>
.my-alert .el-alert__close-btn {
  display: none !important;
}
</style>
